<template>
  <div class="supplier-add views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">供应商信息</div>
      <div class="wlm-form-content">
        <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
          <el-form-item label="供应商名称" prop="name">
            <el-input v-model.trim="formFormatData.formData.name">
            </el-input>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="user_name">
            <el-input v-model.trim="formFormatData.formData.user_name">
            </el-input>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="phone">
            <el-input v-model.trim="formFormatData.formData.phone">
            </el-input>
          </el-form-item>
          <el-form-item label="结算费率" prop="rate">
            <el-input v-model.trim="formFormatData.formData.rate">
            </el-input>
            <div class="form-help">平台抽成比例，例如默认费率10%，那么商品卖出100元，供应商得90元，平台抽成10元</div>
          </el-form-item>
          <!-- <el-form-item label="是否正常供货" prop="status">
            <el-input v-model.trim="formFormatData.formData.status">
            </el-input>
          </el-form-item> -->
          <el-form-item label="供应商logo" prop="logo" ref="supplierlogo">
            <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
            <div class="form-help">建议尺寸200*200</div>
          </el-form-item>
          <el-form-item label="供应商资质" prop="qualifications" ref="intelligence">
            <choose-files ref="chooseFiles" :config="chooseIntelligenceConfig" :changeEvt="formFormatFiltersChange"></choose-files>
            <div class="form-help">建议尺寸200*200</div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/supplierManagement', code: 1 }})" type="primary" :loading="loading">保存</el-button>
      <router-link tag="span" to="/application/supplierManagement">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>

</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import { addSupplier, getSupplierDetail } from '@/api/commityBuy'
import { checkArrhasData, checkPhone, checkNumberAnddDecimal } from '@/utils/validate'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'Community',
  components: {
    ChooseFiles
  },
  data() {
    return {
      loading:false,
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'logo',
          model: 'img'
        }
      },
      chooseIntelligenceConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'qualifications',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'supplierForm',
        api: {
          editForm: {
            api: getSupplierDetail,
            params: {
              id: ''
            },
            redirect: 's_id',
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseIntelligenceConfig']
              }
            }
          },
          submitForm: addSupplier
        },
        formData: {
          name: '',
          user_name: '',
          phone: '',
          rate: '',
          logo: [],
          qualifications: []

        },
        rules: {
          name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
          user_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: checkPhone, message: '请输入正确的手机号', trigger: ['change', 'blur'] }],
          rate: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: checkNumberAnddDecimal, message: '请输入大于等于0的数字', trigger: ['change', 'blur'] }],
          logo: [{ required: true, message: '请选择供应商logo', trigger: 'blur' }, { validator: checkArrhasData, message: '请选择供应商logo', trigger: 'blur' }],
          qualifications: [{ required: true, message: '请选择图片', trigger: 'blur' }, { validator: checkArrhasData, message: '请选择图片', trigger: 'blur' }]
        }

      }
    }
  }

}
</script>

<style>
</style>
